<template>
  <view class="page_bg p-12 page_min_height">
    <button class="flex reset_btn" open-type="contact">
      <image src="/static/images/ad.png" class="w-full" mode="widthFix" />
    </button>
    <view class="mt-12 p-12 rounded-md bg-white">
      <view class="grid grid-cols-4 gap-x-12 gap-y-20">
        <navigator
          v-for="(item, index) in SERVICE_LIST"
          :key="index"
          :url="item.url"
          class="text-center"
          hover-class="none"
        >
          <image class="w-42 h-42 mb-4" :src="item.icon" mode="aspectFill" />
          <view class="text-xs text-gray-700">{{ item.title }}</view>
        </navigator>
      </view>
    </view>
    <!-- 服务列表 -->
    <view class="mt-12 p-12 bg-white rounded-md">
      <view class="flex justify-between items-center mb-12">
        <view class="text-base font-bold">我的服务工单</view>
        <uni-icons type="refresh-filled" color="#0163ff" size="24" @click="initData" />
      </view>
      <DataLoading v-if="loading" />
      <template v-else>
        <template v-if="dataList.length">
          <view
            v-for="item in dataList"
            :key="item.id"
            class="p-12 border-t border-solid border-gray-100"
            @click="toDetail(item)"
          >
            <view class="flex justify-between items-center">
              <view class="font-bold line-clamp-2">{{ item.type_name }}</view>
              <view class="px-8 py-2 text-xs rounded-md" :class="WORK_ORDER_STATUS_CLS[item.status] || ''">
                {{ item.status_text }}
              </view>
            </view>
            <view class="flex justify-between items-center mt-12 text-gray-400 text-xs">
              <view>工单编号：{{ item.code || '-' }}</view>
              <view>{{ item.created_at }}</view>
            </view>
          </view>
        </template>
        <template v-else-if="userIdentity.isLogin">
          <EmptyData v-if="userIdentity.isCustomer" />
          <NotCustomer v-else />
        </template>
        <NotLogin v-else />
      </template>
    </view>
    <button v-if="!loading && dataList.length < 5" class="flex reset_btn !mt-12" open-type="contact">
      <image src="/static/images/ad2.png" mode="widthFix" class="w-full" />
    </button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { SERVICE_LIST } from '@/libs/config';
import { getWorkOrderListApi } from '@/api/service';
import { usePage, useUserIdentity } from '@/utils/usePublic';
import { WORK_ORDER_STATUS_CLS } from '@/libs/config';

const loading = ref(true);
const dataList = ref([]);
const pageParams = usePage();
const userIdentity = useUserIdentity();
const serviceTextMap = {
  contract_review: '合同审查',
  contract_writing: '合同代写',
  legal_consultation: '法律咨询',
  legal_advice: '法律建议',
  debt_collection: '债务催收',
};

onLoad(() => {
  if (userIdentity.isCustomer) {
    initData();
  } else {
    loading.value = false;
  }
});

onReachBottom(() => {
  if (pageParams.isLoadAll || !userIdentity.isCustomer) {
    return;
  }
  pageParams.page++;
  getDataList();
});

function initData() {
  if (!userIdentity.isCustomer) {
    return;
  }
  loading.value = true;
  pageParams.page = 1;
  pageParams.isLoadAll = false;
  dataList.value = [];
  getDataList();
}

async function getDataList() {
  try {
    const { code, data } = await getWorkOrderListApi({ ...pageParams });
    loading.value = false;
    if (code === 200) {
      data.list.forEach(item => {
        item.type = item.service?.type ?? item.type;
        if (item.status === 'rejected') {
          item.status = 'pending_assignment';
          item.status_text = '待分配';
        }
        item.type_name = serviceTextMap[item.type];
      });
      dataList.value = dataList.value.concat(data.list);
      pageParams.isLoadAll = data.list.length < pageParams.limit;
    }
  } catch (e) {
    loading.value = false;
    console.error(e);
  }
}

const detailPageUrlMap = {
  legal_consultation: '/pages/service/consult/detail',
  debt_collection: '/pages/service/debt/detail',
};
function toDetail(item) {
  uni.navigateTo({
    url: `${detailPageUrlMap[item.type]}?id=${item.service.id}`,
  });
}
</script>
